<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .label{
            display: inline-block;
            width: 4%;
        }
        .btn-danger {
            color: #fff;
            background-color: #dd5826;
            border-color: #dd5826;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        }
    </style>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木管理</li>
            <li class="active">编辑子地块</li>
        </ol>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-1">
                <section class="widget">
                    <input id="areaid" type="hidden" th:value="${area.areaLocation_id}">
                    <header>
                        <h5>
                            编辑子地块
                        </h5>
                        <div class="widget-controls">
                            <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                            <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body" style="margin-left: 0;">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">子地块宽:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="et_w"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">子地块高:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="et_h"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">道路宽(单位:m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="et_roadw"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">选择留路边</label>
                                <div class="col-md-7">
                                    <input type="checkbox" id="bei">北</input>
                                    <input type="checkbox" id="xi">西</input>
                                    <input type="checkbox" id="nan">南</input>
                                    <input type="checkbox" id="dong">东</input>
                                </div>
                            </div>
                            <div class="col-md-offset-4 col-md-7">
                                <input type="submit" value="自动生成" id="autogenerate" class="btn btn-success width-100 mb-xs" role="button">
                                <input type="submit" value="上传地块" id="upload" class="btn btn-info width-100 mb-xs" role="button">
                            </div>
                        </fieldset>
                    </div>
                </section>
            </div>
        </div>
        <div >
            <canvas id="c2" width="11900" height="11700"> <!--宽高写在html里，写在css里有问题-->
                <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
            </canvas>
        </div>
        <script th:inline="javascript">
            var oC = document.getElementById('c2');
            var canvas = oC.getContext('2d');
            var arrs=new Array();
            var scalearrs=new Array();
            var scale=5;
            var alllength,allwidth;
            var netdata;
            function flush () {
                alllength=parseInt([[${area.length}]])*scale;
                allwidth=parseInt([[${area.breadth}]])*scale;
                canvas.clearRect(0, 0, 11900, 11700);
                drawArea(0, 0,allwidth, alllength);
                scalearrs=new Array();
                for(var i=0;i<arrs.length;i++){
                    scalearrs.push(new Area(arrs[i].name,arrs[i].x*scale,arrs[i].y*scale,arrs[i].w*scale,arrs[i].h*scale));
                }
                for(var i=0;i<scalearrs.length;i++){
                    var obj=scalearrs[i];
                    drawArea(obj.x,obj.y,obj.w,obj.h);
                    canvas.strokeText(obj.name + "", obj.x + obj.w / 2.0 - 5, obj.y + obj.h / 2.0 + 5);
                }
            };
            findArea = function (x, y) {
                console.log("x:" + x + "y:" + y);
                if (scalearrs == null)return -1;
                else {
                    var len = scalearrs.length;
                    for (var i = 0; i < len; i++) {
                        if (x > scalearrs[i].x && x < scalearrs[i].x + scalearrs[i].w && y > scalearrs[i].y && y < scalearrs[i].y + scalearrs[i].h) {
                            return i;
                        }
                    }
                }
                return -1;
            };
            function  drawArea(x,y,w,h) {
                canvas.strokeStyle = "green";
                canvas.lineWidth = 1;
                canvas.strokeRect(x, y, w, h);
            };
            function Area(name,x, y, w, h) {
                this.name=name;
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }
            $("#autogenerate").click(function(){
                if($("#et_w").val()==null||$("#et_h").val()==null||$("#et_roadw").val()==null){
                   alert("信息输入不完整")
                   return;
                }
                var isbei = $("#bei").is(':checked');
                var isnan = $("#nan").is(":checked");
                var isdong = $("#dong").is(":checked");
                var isxi = $("#xi").is(":checked");
                $.ajax({
                    url: "/api/area/generateland?areaname="+$("#areaid").val()+"&w="+$("#et_w").val()+"&h="+$("#et_h").val()+"&roadw="+$("#et_roadw").val()+"&isbei="+isbei+"&isnan="+isnan+"&isxi="+isxi+"&isdong="+isdong,
                    type: 'GET',
                    async: false,
                    success: function (data) {
                        console.log(data);
                        arrs=new Array();
                        for(var i=0;i<data.length;i++){
                            var obj=data[i];
                            arrs.push(new Area(obj.name,obj.xpos,obj.ypos,obj.w,obj.h))
                        }
                        netdata=data;
                        flush();
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            });
            $("#upload").click(function () {
                var t={"areaid":$("#areaid").val(),"lands":netdata};
                $.ajax({
                    url: "/api/area/upload",
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify(t),
                    type: 'POST',
                    async: false,
                    success: function (data) {
                        console.log(data);
                        alert("上传成功");
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            });
        </script>
    </main>
</div>
</body>
</html>
